<template>
    <div :class="[isPending?'g_p':'' ,'search']">
        <div class="inputfa">
            <span class="iconfont icon-search"></span>
            <input type="text" v-model="searchValue">
        </div>
    </div>
</template>

<script setup lang="ts">
    import {defineProps, ref} from 'vue'
    const searchValue = ref("重庆小面")
    const props = defineProps({
        width:{
            type:Number,
            default:100
        },
        isPending:{
            type:Boolean,
            default:true
        }
    })
    const isPending = ref(props.isPending)
    const w = ref(props.width+`%`)
</script>

<style scoped lang="scss">
    .search{
        width: v-bind(w);
        height: .32rem;
        box-sizing: border-box;
        .inputfa{
            display: flex;
            border-radius: .16rem;
            .iconfont{
                margin: .08rem  .16rem;
                display: inline-block;
            }
            width: 100%;
            height: 100%;
            background-color: #F5F5F5;
            font-size: .14rem;
            color: #B7B7B7;
            input{
                width: 100%;
                // height: 100%;
                border: none;
                background: transparent;
                &:focus{
                    outline:none;
                    box-shadow: none;
                }
            }

        
    }
    }

</style>